<template>
  <view class="tip" :class="{paddingPage}" :style="{color: color, backgroundColor: bcolor}">
    <view>
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name:"TopTip",
    props: {
      color: {
        type: String,
        default: ''
      },
      bcolor: {
        type: String,
        default: ''
      },
      paddingPage: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.tip {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 24upx;
  color: #F77E0D;
  line-height: 44upx;
  background: #FFFAF2;
  padding: 12upx 32upx;
  text-align: center;
  border-radius: 8upx;
  >view {
    display: inline-block;
    text-align: left;
  }
}
.paddingPage {
  width: 100vw;
  position: sticky;
  top: 0;
  left: 0;
  transform: translateY(-32upx);
  margin-left: -32upx;
  margin-right: -32upx;
  border-radius: 0;
}
</style>